<template>
  <view>
    <uni-popup ref="popupcancel" type="center" :maskClick="false" @change="calcuChange">
      <view class="cancel-order">
       <image class="calculator-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/calculator1.png"></image>
       <!-- 标题与× -->
       <view class="header-titel">
         <view class="title">请确认您是家长</view>
         <view class="iconfont close" @click="$refs.popupcancel.close()">&#xe61b;</view>
       </view>
       <!-- 随机数与确认图片 -->
       <view class="random-arrow">
         <view class="randomNumber">
           {{randomNumber1}} × {{ randomNumber2 }} = {{ summation ? summation : ''}}
         </view>
         <view @click="deleteNum" class="arrow-btn" :class="deleteStatus? 'deleteStatus' : ''">
          <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/calculator3.png"></image>
         </view>
       </view>
       <!-- 数字按钮 -->
       <view class="btn-box">
         <view class="btn-img" v-for="(item,index) in 10" @click="clickNum(index)" :class="btnImgStatus==index ? 'btnImgStatus' : ''">
           <image mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/calculator2.png"></image>
           <view class="btn-numbel">{{ index }}</view>
         </view>
       </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
   import { pathToBase64, base64ToPath } from '@/components/pathBase64/index.js'
  export default {
    props:{
      randomNumber1:{
        type: Number
      },
      randomNumber2:{
        type: Number
      }
    },
  	data() {
  		return {
        summation: '',
        defaultNum: [],
        btnImgStatus: '',
        deleteStatus: false,
      }
    },
    mounted() {},
    methods:{
      // 点击的数字
      clickNum(index) {
        this.btnImgStatus = index
        let strNum = String(index)
        this.defaultNum.push(strNum)
        if(this.defaultNum.length>0){
          let conten = this.randomNumber1 * this.randomNumber2
          this.summation = parseInt(this.summation)
          if(this.defaultNum[1]){
            this.summation = this.defaultNum[0]+this.defaultNum[1]
          }else{
            this.summation = this.defaultNum[0]
          }
          if(this.summation == conten){
            this.$emit('counterClick')
            setTimeout(() => {
              this.summation = ''
              this.defaultNum= []
            },500)
          }
        }
      },
      // 清除
      deleteNum() {
        this.deleteStatus = !this.deleteStatus
        this.summation = this.summation.substring(0,this.summation.length - 1)
        this.defaultNum.splice(2,this.defaultNum.length)
        if(this.summation.length>0){
          this.defaultNum.splice(1,1)
        }
        if(!this.summation.length){
          this.defaultNum.splice(0,1)
        }
      },
      // 图片转base64
      imgBase() {
        // const vm = this
        // let url = "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/calculator1.png"
        // pathToBase64(url).then(res => {
        //   vm.base64Img = res
        // })
      },
      // change事件
      calcuChange(e) {
        if(!e.show){
          this.summation = ''
          this.defaultNum = []
        }
      },
      getPopupOpen() {
        this.$refs.popupcancel.open()
      },
      getPopupConcal() {
        this.$refs.popupcancel.close()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cancel-order{
    width: 574rpx;
    height: 656rpx;
    .calculator-img{
      width: 100%;
      height: 100%;
    }
    .header-titel{
      position: absolute;
      left: 150rpx;
      top:170rpx;
      display: flex;
      align-items: center;
      color: #FFFFFF;
      .title{
        font-weight: bold;
        font-size: 40rpx;
        text-shadow: 0 0 15rpx #00974E;
      }
      .close{
        margin-left: 70rpx;
        font-size: 30rpx;
      }
    }
    .random-arrow{
      width: 356rpx;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 335rpx;
      left: 150rpx;
      .randomNumber{
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
      }
      .arrow-btn{
        width: 50rpx;
        height: 45rpx;
      }
      .deleteStatus{
        animation: deleteStatus 0.8s linear .5s both;
      }
       @keyframes deleteStatus {
         0%{ transform: scale(0.94) }
         50%{ transform: scale(0.97) }
         100%{ transform: scale(1) }
       }
    }
    .btn-box{
      width: 440rpx;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: 65%;
      left: 70rpx;
      .btnImgStatus{
        animation: btnImgStatus 0.8s linear .5s both;
       // -moz-transform: scale(1.1);
       //  -webkit-transform: scale(1.1);
       //  -o-transform: scale(1.1);
      }
       @keyframes btnImgStatus {
          0%{ transform: scale(1.04) }
          50%{ transform: scale(1.02) }
          100%{ transform: scale(1) }
        }
      .btn-img{
        width: 72rpx;
        height: 68rpx;
        margin: 0 20rpx 20rpx 0;
        position: relative;
        .btn-numbel{
          color: #A05700;
          font-size: 36rpx;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .btn-img:nth-child(5n){
        margin-right: 0rpx;
      }
    }
  }
</style>

